<template>
  <div>
    <el-form
      :model="groupForm"
      :rules="rules"
      ref="groupForm"
      label-width="80px"
    >
      <el-form-item
        label="群头像"
        prop="groupName"
      >
        <image-upload
          class="upload"
          :size="60"
          :file="_avatar"
          @upload="handleUpload"
        />
      </el-form-item>
      <el-form-item
        label="群名称"
        prop="groupName"
      >
        <el-input
          placeholder="请输入群名称"
          v-model="groupForm.groupName"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="群介绍"
        prop="groupIntroduction"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入群介绍"
          v-model="groupForm.groupIntroduction"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="群通知"
        prop="groupAnnouncement"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入群通知"
          v-model="groupForm.groupAnnouncement"
        ></el-input>
      </el-form-item>
    </el-form>
    <form-button
      :loading="submitLoading"
      @submit="submitForm('groupForm')"
      @cancel="cancelSubmit"
    />
  </div>
</template>

<script>
import { groupUpdate } from '@/api/group'
export default {
  name: 'EditGroupInfoForm',
  props: {
    groupInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      groupForm: {
        groupId: '',
        groupAvatar: '',
        groupName: '',
        groupIntroduction: '',
        groupAnnouncement: ''
      },
      rules: {
        groupName: [
          { required: true, message: '群名称不能为空', trigger: 'blur' },
          { max: 20, message: '长度最多20个字符', trigger: 'blur' }
        ],
        groupIntroduction: [
          { max: 20, message: '长度最多20个字符', trigger: 'blur' }
        ],
        groupAnnouncement: [
          { max: 20, message: '长度最多20个字符', trigger: 'blur' }
        ]
      },
      submitLoading: false
    }
  },
  computed: {
    _avatar () {
      return this.groupForm.groupAvatar || this.$const.DEFAULT_PICTURE
    }
  },
  methods: {
    reset () {
      this.groupForm.groupId = this.groupInfo.groupId
      this.groupForm.groupAvatar = this.groupInfo.groupAvatar
      this.groupForm.groupName = this.groupInfo.groupName
      this.groupForm.groupIntroduction = this.groupInfo.groupIntroduction
      this.groupForm.groupAnnouncement = this.groupInfo.groupAnnouncement
    },
    // 上传图片
    handleUpload (data) {
      this.groupForm.groupAvatar = data
    },
    // 取消提交
    cancelSubmit () {
      this.$emit('cancel')
    },
    // 提交修改表单
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.handleGroupUpdate()
        } else {
          return false
        }
      })
    },
    // 修改群组信息
    async handleGroupUpdate () {
      const {
        groupId: id,
        groupAvatar: avatar,
        groupName: name,
        groupIntroduction: intro,
        groupAnnouncement: anno
      } = this.groupForm
      this.submitLoading = true
      await groupUpdate(id, avatar, name, intro, anno)
      this.submitLoading = false
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  width: 60px;
  height: 60px;
}
</style>
